import React from 'react';
import classNames from 'classnames';

import './ReportTab.scss';
import { SwipeableViews } from '../common-ui-parts';

const REPORT_TAB_SECTION = [
  'detail',       // 詳細
  'advice',       // アドバイス
  'simulation',   // シミュレーション
];

class ReportTab extends React.Component {
  constructor(props) {
    super(props);
    this.state = { current: props.defaultSection };
  }

  render() {
    const { detailRender, adviceRender, simulationRender } = this.props;
    const index = REPORT_TAB_SECTION.indexOf(this.state.current);

    const renders = [];
    renders.push(detailRender);
    renders.push(adviceRender);
    if (simulationRender) {
      renders.push(simulationRender);
    }

    return (
      <div className="ReportTab">
        <ul className="menu">
          <li className={classNames('detail',
            {
              active: this.state.current === 'detail',
              nosimulation: !simulationRender,
            })}
            onClick={() => this._swichSection('detail')}>詳細</li>
          <li className={classNames('advice',
            {
              active: this.state.current === 'advice',
              nosimulation: !simulationRender,
            })}
            onClick={() => this._swichSection('advice')}>アドバイス</li>
          { simulationRender &&
            <li className={classNames('simulation', { active: this.state.current === 'simulation' })}
              onClick={() => this._swichSection('simulation')}>リスク軽減シミュレーション</li>
          }
          <li className={classNames('bottom', 'detail',
            {
              active: this.state.current === 'detail',
              nosimulation: !simulationRender,
            }
          )} />
          <li className={classNames('bottom', 'advice',
            {
              active: this.state.current === 'advice',
              nosimulation: !simulationRender,
            }
          )} />
          { simulationRender &&
            <li className={classNames('bottom', 'simulation',
              {
                active: this.state.current === 'simulation',
              }
            )} />
          }
        </ul>

        <SwipeableViews
          index={index}
          onChengeIndex={ (idx) => {
            this._swichSection(REPORT_TAB_SECTION[idx]);
          }}
          onPageValidate={ () => (true) }
          >
          {renders.map((render, idx) => (
            <div key={idx}>
              {React.cloneElement(render(), { ref: REPORT_TAB_SECTION[idx] })}
            </div>
          ), this)}
        </SwipeableViews>
      </div>
    );
  }

  _swichSection(section) {
    this.setState({ current: section }, () => {
      this.refs[section].scrollTop();
    });
  }
}

/*ReportTab.propTypes = {
  category: React.PropTypes.string,
  detailRender: React.PropTypes.func.isRequired,
  adviceRender: React.PropTypes.func.isRequired,
  simulationRender: React.PropTypes.func,
  defaultSection: React.PropTypes.oneOf(REPORT_TAB_SECTION),
}*/
ReportTab.defaultProps = {
  defaultSection: REPORT_TAB_SECTION[0],
}
export default ReportTab
